<template>
<swiper class="container" number='3' @change="swiperChange">
	<swiper-item class="s_item" v-for="(item, index) in parkList" :key="index">
		<view class="flex_b_c">
			<view class="item1" @click="toPage('parkDetail',index)">
				<!-- <image class="img2" :src="item.thumb||'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/555.png'" mode=""></image> -->
				<view class="img_view">
					<image class="img2" :src="item.thumb||'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/555.png'" mode=""></image>
					<view class="see">
						<image class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/see.png" mode="widthFix"></image>{{item.read_num||0}}
						<image class="see_img m_left" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/fx_icon.png" mode="widthFix"></image>{{item.share_num||0}}
					</view>
				</view>
				<view class="city_name" v-show="item.level_name">{{item.level_name}}</view>
				<view class="park_name"><text style="color: red;font-size: 14px;" v-if="item.city_name">【{{item.city_name.length>3?item.city_name.substr(0,3):item.city_name}}】</text> {{item.park_name}}</view>
				<view class="chain_list">
					<view class="chain_item" v-if="item.chainList.length>0">{{item.chainList[0]}}</view>
					<view class="chain_item" v-if="item.chainList.length>1">{{item.chainList[1]}}</view>
				</view>
		<!-- 		<view class="fx_list" v-if="item.share.data.length>0">
					<image v-for="(item1,index1) in item.share.data.slice(0,3)" :key='index1' :class="index1!=0?'left':''" class="fx_img" :src="item1.avatar" mode=""></image>
					<view class="fx_title">等 {{item.share.data.length}} 人分享</view>
				</view> -->
			</view>
	<!-- 		<view class="item1" v-if='parkList[index*2+1] && parkList[index*2+1].park_name' @click="toPage('parkDetail',index*2+1)">
				<view class="img_view">
					<image class="img2" :src="parkList[index*2+1].thumb||'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/555.png'" mode=""></image>
					<view class="see">
						<image class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/see.png" mode="widthFix"></image>{{parkList[index*2+1].read_num||0}}
						<image class="see_img m_left" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/pl.png" mode="widthFix"></image>{{parkList[index*2+1].comment_num||0}}
					</view>
				</view>
				
				<view class="city_name" v-show="item.level_name">{{parkList[index*2+1].level_name}}</view>
				<view class="park_name" ><text style="color: red;font-size: 14px;" v-if="parkList[index*2+1].city_name">【{{item.city_name}}】</text>{{parkList[index*2+1].park_name}}</view>
				<view class="chain_list">
					<view class="chain_item" v-if="parkList[index*2+1].chainList.length>0">{{parkList[index*2+1].chainList[0]}}</view>
					<view class="chain_item" v-if="parkList[index*2+1].chainList.length>1">{{parkList[index*2+1].chainList[1]}}</view>
				</view>
				<view class="fx_list" v-if="parkList[index*2+1].share.data.length>0">
					<image v-for="(item1,index1) in parkList[index*2+1].share.data.slice(0,3)" :key='index1' :class="index1!=0?'left':''" class="fx_img" :src="item1.avatar" mode=""></image>
					<view class="fx_title">等 {{parkList[index*2+1].share.data.length}} 人分享</view> 
				</view>
			</view> -->
			<!-- <view class="item1" v-else></view> -->
		</view>
	</swiper-item>
</swiper>
</template>

<script>
	export default {
		props: ['parkList'],
		name:"	",
		data() {
			return {
				list:[
					'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJpdoetgNjXAOa7utF76iaVnjfUuaKxdglODsMlzjD0I6BtmHaT3aNPyYoBVibL3lBXQD2kOic2xJknA/132',
					'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
					'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKWscCftDyJ5MpAXh9HhiauSYXl1QLnl3foQdk7sltibL8y6AxcQf4BDM8jyiatia13GPIbLG5lAOp1OA/132',
					'https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM6EaARoF8h5GJx9KGBEaguPicWgTUibyTcx9AxOgI7a6CeotfLLLyn49rQvk3IDRAXiaFicdDyqhSKoEQ/132',
					'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIfibk3XNvMAkhmgORfwP8kmoibouxxDbumvQzTNHFV4rafc95EZVRaEIPCcMK0vOeSzfTW0qk97iaqQ/132',
					'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI9vdN4zSMulM8NDIQbox6NXZB4USz0b2aibibHrqRtrFZ8B5ico5Mzf75kQTAyqApJGCuqxJtlpxIfg/132	',
					'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLSP8PoZ2mofM595hcdaIDdbWDISJrhfa1qA8jZXCgRltwian69jtOwLowr6GfcygGnPbj2Krib8KvQ/132',
					'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoVU91BNnic8cj6octknbgjOCoWMUgyeKDeicgHIHzEiaTDczHkZWic4XhlE2CkXY6ENyteUOxEArUiamg/132',
					'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoVU91BNnic8cj6octknbgjOCoWMUgyeKDeicgHIHzEiaTDczHkZWic4Xhl5zCpic8R7uH94Eaic6MxyaLQ/132',
					'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELw5B5acZUJVIvSwVJlRjaxyWYjYicj4CzkcEjJibGZcwWPTDm39gKqDuo2C6iaQmCvVTuIHreHicibYgQ/132',
					'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELw5B5acZUJVIvSwVJlRjaxyWYjYicj4CzkcEjJibGZcwWPTDm39gKqDuo2C6iaQmCvVTuIHreHicibYgQ/132',
				]
			};
		},
		methods:{
			swiperChange(){
				
			},
			onload(){
			
			},
			toPage(page,index){
				uni.navigateTo({
					url:`/pages/${page}/${page}?id=${this.parkList[index].id}`
				})
			}
		}
	}
</script>

<style>
.see{
	display: flex;
	color: #fff;
	font-size: 12px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: calc(100% - 16px);
	padding: 2px 8px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 0 0 14rpx 14rpx;
	align-items: center;
}
.see_img{
	width: 14px;
	margin-right: 2px;
}
.m_left{
	margin-left: 10px;
}
.img_view{
	height: 112px;
	width: 222px;
	border-radius: 6px;
	position: relative;
}
.container{
	height: 150px;
}
.img2{
	height: 112px;
	width: 222px;
	border-radius: 6px;
}
.flex_b_c{
	height: 150px;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}
.s_item{
	width: 232px !important;
	margin-left: 10px;
}
.item1{
	width: 100%;
	height: 140px;
	position: relative;
}
.city_name{
	position: absolute;
	top:-6px;
	left: 14px;
	padding: 5px;
	font-size: 14px;
	background: #FA6400;
	border-radius: 4px;
	color: #fff;
}
.park_name{
	width: 208px;
	height: 22px;
	font-size: 16px;
	font-weight: 400;
	color: #000000;
	line-height: 22px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chain_list{
	display: flex;
}
.chain_item{
	background: #ECF3FF;
	margin-right: 5px;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #2d74de;
	padding: 2px 5px;
	margin: 5px 0;
}
.fx_list{
	display: flex;
	position: absolute;
	top: 72px;
	left: 12px;
}
.fx_img{
	width: 28px;
	height: 28px;
	/* background: #FA6400; */
	border: 1px solid #FFFFFF;
	border-radius: 50%;
}
.left{
	margin-left: -12px;
}
.fx_title{
	height: 20px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 20px;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
	margin-left: 10px;
	margin-top: 10px;
}
</style>
